<template>
  <div class="div">
    <h1>一键评估系统</h1>
    <el-card label="登录" name="first">
      <el-form
        :model="loginInfo"
        label-position="left"
        :rules="rules"
        size="large"
        :show-message="true"
        status-icon
      >
        <el-form-item prop="name">
          <el-input
            placeholder="登录账户"
            :prefix-icon="User"
            v-model="loginInfo.name"
          />
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            placeholder="登录密码"
            :prefix-icon="Lock"
            v-model="loginInfo.password"
            type="password"
          />
        </el-form-item>
        <el-form-item style="">
          <el-button style="width: 300px" type="primary" @click="login()"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import { reactive, ref } from "vue";
import { User, Lock } from "@element-plus/icons-vue";
import axios from "axios";
import { ElMessage, ElNotification } from "element-plus";
import { useMainStore } from "../store/index.js";
import { useRouter } from "vue-router";
import qs from "qs";
export default {
  name: "login",
  setup() {
    const rules = reactive({
      name: [
        {
          required: true,
          message: "请输入你的账号",
          trigger: "blur",
        },
        {
          min: 3,
          max: 50,
          message: "账户名称长度在 3 到 20 个字符(评估登录)",
          trigger: "blur",
        },
        {
          pattern: /\d/g,
          message: "你的账号应该是数字，看看是不是多打了空格",
          trigger: "change",
        },
      ],
      password: [
        {
          required: true,
          message: "请输入你的密码",
          trigger: "blur",
        },
        {
          min: 3,
          max: 50,
          message: "密码长度在 3 到 20 个字符(评估登录)",
          trigger: "blur",
        },
      ],
    });
    let loginInfo = reactive({
      name: "",
      password: "",
    });
    const mainStore = useMainStore();
    const userouter = useRouter();
    function login() {
      axios
        .post(
          "/connect/token",
          qs.stringify({
            username: loginInfo.name,
            password: loginInfo.password,
            code: "2341",
            vid: "",
            client_id: "43215cdff2d5407f8af074d2d7e589ee",
            client_secret:
              "DBqEL1YfBmKgT9O491J1YnYoq84lYtB/LwMabAS2JEqa8I+r3z1VrDqymjisqJn3",
            grant_type: "password",
            tenant_id: "32",
          })
        )
        .then(
          (value) => {
            if (value.response) {
              ElMessage({
                showClose: true,
                message: value.response.data.error_description,
                center: true,
                type: "error",
              });
            } else {
              ElMessage({
                showClose: true,
                message: "登录成功",
                center: true,
                type: "success",
              });
              ElNotification({
                title: "Success",
                message: "登录成功",
                type: "success",
              });
              localStorage.setItem("loginfo", value.data.access_token);
              // mainStore.saveToken(value.data.access_token);
              userouter.replace("/main");
            }
          },
          (err) => {
            ElMessage({
              showClose: true,
              message: err,
              type: "error",
            });
          }
        );
    }
    return {
      loginInfo,
      rules,
      User,
      Lock,
      login,
    };
  },
};
</script>
<style scoped>
.div {
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
  background-color: rgb(0, 47, 167);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.div h1 {
  font-size: 60px;
  color: white;
  margin-bottom: 20px;
}
</style>